<template>
  <a-layout-sider
    :class="[theme, 'sider', isMobile ? null : 'shadow', fixSiderbar? 'ant-fixed-sidemenu' : null]"
    width="256px"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null"
  >
    <div :class="['logo', theme]">
      <router-link to="/">
        <img src="static/img/logo.png" alt />
        <h1 class="animated fadeIn">{{systemName}}</h1>
      </router-link>
    </div>
    <template v-if="user.officeId !== null">
      <a-cascader
        :options="options"
        :value="optionValue"
        placeholder="请选择操作的企业"
        @change="onChange"
        allowClear
        style="width: 100%"
      />
    </template>
    <i-menu :theme="theme" :collapsed="collapsed" :menuData="menuData" @select="onSelect" />
  </a-layout-sider>
</template>

<script>
import IMenu from "./menu";
import { mapState } from "vuex";

let user = [];
let isShow = false;
export default {
  name: "SiderMenu",
  components: { IMenu },
  data() {
    return {
      companyId: "",
      options: [],
      user: user,
      isShow: isShow,
      optionValue: [],
      defaultOption: []
    };
  },
  props: {
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    menuData: {
      type: Array,
      required: true
    },
    theme: {
      type: String,
      required: false,
      default: "dark"
    }
  },
  computed: {
    ...mapState({
      isMobile: state => state.setting.isMobile,
      systemName: state => state.setting.systemName,
      fixSiderbar: state => state.setting.fixSiderbar
    })
  },
  methods: {
    onSelect(obj) {
      this.$emit("menuSelect", obj);
    },
    onChange(value) {
      let that = this;
      if (value.length > 1) {
        that.optionValue = value;
        this.options.forEach(option => {
          if (value[0] === option.value) {
            that.$db.save("ZONE", option);
            let op = option.children.forEach(op => {
              if (value[1] === op.value) {
                that.$db.save("COMPANY", op);
                return;
              }
            });
            return;
          }
        });
        isShow = true;
        this.$router.go(0);
      } else {
        this.$message.warning("请选择企业进行操作");
      }
    },
    filter(inputValue, path) {
      return path.some(
        option =>
          option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
      );
    }
  },
  beforeCreate() {
    let currUser = this.$db.get("USER");
    user = currUser;
    if (user.officeId === null || user.officeId === undefined){
      let obj = new Object();
      obj.value = user.companyId;
      this.$db.save("COMPANY", obj);
    }
  },
  mounted() {
    this.$post("zone/zc", {
      username: user.username
    }).then(r => {
      let that = this;
      this.options = r.data;
      if (
        Object.keys(that.$db.get("ZONE")).length === 0 &&
        Object.keys(that.$db.get("COMPANY")).length === 0
      ) {
        for (const i in this.options) {
          if (this.options[i].children.length > 0) {
            that.defaultOption.push(this.options[i].value);
            that.defaultOption.push(this.options[i].children[0].value);
            that.optionValue = that.defaultOption;
            that.$db.save("ZONE", this.options[i]);
            that.$db.save("COMPANY", this.options[i].children[0]);
            break;
          }
        }
      }else{
        that.defaultOption.push(that.$db.get("ZONE").value);
        that.defaultOption.push(that.$db.get("COMPANY").value);
        that.optionValue = that.defaultOption;
      }
    });
  }
};
</script>

<style lang="less" scoped>
.shadow {
  box-shadow: 1px 0 6px rgba(0, 21, 41, 0.35);
}
.sider {
  z-index: 16;
  position: relative;
  overflow-x: hidden;
  &.light {
    background-color: #fff;
  }
  &.dark {
    background-color: #393e46;
  }
  &.ant-fixed-sidemenu {
    position: fixed;
    overflow-y: auto;
    height: 100%;
  }
  .logo {
    height: 59px;
    position: relative;
    line-height: 59px;
    padding-left: 24px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    overflow: hidden;
    &.light {
      background-color: #fff;
      border-bottom: 1px solid #f8f8f8;
    }
    &.dark {
      background-color: #393e46;
      h1 {
        color: #fff;
      }
    }
    h1 {
      color: #fff;
      font-size: 20px;
      margin: 0 0 0 12px;
      font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI,
        PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue,
        Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
        Segoe UI Symbol;
      font-weight: 600;
      display: inline-block;
      height: 32px;
      line-height: 32px;
      vertical-align: middle;
    }
    img {
      width: 32px;
      display: inline-block;
      vertical-align: middle;
    }
  }
}
</style>
